<template>
	<view class="statistics">
		<u-tabs :list="list" :is-scroll="false" :current="currentSta" @change="change" active-color="#00b089"></u-tabs>
		
		<!-- 记录 -->
		<view v-show="currentSta == 0">
			<scroll-view scroll-y  class="recordns_list">
				<view class="recordns_item" v-for="(item,index) in recordnsList" :key="index" @click="goToAddrecordDeta(item)">
					<view class="rec_item_box">
						<image class="rec_it_img" src="https://xcx.shuizhisu.com/public/static/img/nav/niaosuan.png" mode=""></image>
					</view> 
					<view class="rec_it_con">
						<text>尿酸值</text>
						<text>{{item.time}}</text>
					</view>
					<text class="rev_it_fr"><text style="color: #f54e63; font-size: 36rpx; margin-right: 10rpx;">{{item.value}} </text> umol/L</text>
				</view>
			</scroll-view > 
		</view>
		<!-- 统计 -->
		<view v-show="currentSta == 3">
			<!-- 最近一周数据 -->
			<view class="sta_tj">
				<view class="sta_tj_title">最近一周尿酸</view>
				<view class="sta_tj_deta">
					<view>
						<text>平均尿酸: </text>
						<text style="color: #04c99b; font-size: 36rpx;">{{uaCountCharData.week.avg}}</text>
						<text>umol/L</text>
					</view>
					<!-- 	<view>
						<text>模拟糖化: </text>
						<text style="color: #04c99b; font-size: 36rpx;">{{uaCountCharData.week.moni}}</text> 
					</view> -->
				</view>
				<view class="sta_tj_con">
					<view>
						<view class="qiun-charts">
							<canvas canvas-id="canvasRingWeek" id="canvasRingWeek" class="charts"></canvas>
						</view>
					</view>
					<view>
						<view class="con_fr">
							<text class="con_fr_one" style="color: #04c99b;">正常: {{uaCountCharData.week.normal_num}} 次</text>
							<text class="con_fr_tow" style="color: #04c99b;">{{uaCountCharData.week.normal_scale}}%</text>
						</view>
						<view class="con_fr">
							<text class="con_fr_one" style="color: #d9a6b0;">偏高:{{uaCountCharData.week.high_num}}次</text>
							<text class="con_fr_tow" style="color: #d9a6b0;">{{uaCountCharData.week.high_scale}}%</text>
						</view>
						<view class="con_fr">
							<text class="con_fr_one" style="color: #f7b948;">偏低:{{uaCountCharData.week.low_num}}次</text>
							<text class="con_fr_tow" style="color: #f7b948;">{{uaCountCharData.week.low_scale}}%</text>
						</view>
					</view>
				</view>
				<view class="sta_tj_foo">
					<view class="tj_foo_fl">
						<text>尿酸最值</text><text>(umol/L)</text>
						<view class="qiun-charts">
							<canvas canvas-id="canvasRingWeekZ" id="canvasRingWeekZ" class="charts"></canvas>
						</view>
					</view>
					<view class="tj_foo_fr">
						<text>分时段平均值</text> 
						<view class="qiun-charts">
							<canvas canvas-id="canvasFrRingWeekZ" id="canvasFrRingWeekZ" class="charts"></canvas>
						</view>
					</view>
				</view>
			</view>
			<!-- 最近一月数据 -->
			<view class="sta_tj">
				<view class="sta_tj_title">最近一月尿酸</view>
				<view class="sta_tj_deta">
					<view>
						<text>平均尿酸: </text>
						<text style="color: #04c99b; font-size: 36rpx;">{{uaCountCharData.one_month.avg}}</text>
						<text>umol/L</text>
					</view>
					<!-- 	<view>
						<text>模拟糖化: </text>
						<text style="color: #04c99b; font-size: 36rpx;"> {{uaCountCharData.one_month.moni}}</text> 
					</view> -->
				</view>
				<view class="sta_tj_con">
					<view>
						<view class="qiun-charts">
							<canvas canvas-id="canvasRingOneMonth" id="canvasRingOneMonth" class="charts"></canvas>
						</view>
					</view>
					<view>
						<view class="con_fr">
							<text class="con_fr_one" style="color: #04c99b;">正常:{{uaCountCharData.one_month.normal_num}}次</text>
							<text class="con_fr_tow" style="color: #04c99b;">{{uaCountCharData.one_month.normal_scale}}%</text>
						</view>
						<view class="con_fr">
							<text class="con_fr_one" style="color: #d9a6b0;">偏高:{{uaCountCharData.one_month.high_num}}次</text>
							<text class="con_fr_tow" style="color: #d9a6b0;">{{uaCountCharData.one_month.high_scale}}%</text>
						</view>
						<view class="con_fr">
							<text class="con_fr_one" style="color: #f7b948;">偏低:{{uaCountCharData.one_month.low_num}}次</text>
							<text class="con_fr_tow" style="color: #f7b948;">{{uaCountCharData.one_month.low_scale}}%</text>
						</view>
					</view>
				</view>
				<view class="sta_tj_foo">
					<view class="tj_foo_fl">
						<text>尿酸最高</text><text>(umol/L)</text>
						<view class="qiun-charts">
							<canvas canvas-id="canvasRingOneMonthZ" id="canvasRingOneMonthZ" class="charts"></canvas>
						</view>
					</view>
					<view class="tj_foo_fr">
						<text>分时段平均值</text> 
						<view>
							<view class="qiun-charts">
								<canvas canvas-id="canvasFrRingOneMonthZ" id="canvasFrRingOneMonthZ" class="charts"></canvas>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 最近三月数据 -->
			<view class="sta_tj">
				<view class="sta_tj_title">最近三月尿酸</view>
				<view class="sta_tj_deta">
					<view>
						<text>平均尿酸: </text>
						<text style="color: #04c99b; font-size: 36rpx;"> {{uaCountCharData.three_month.avg}}</text>
						<text>umol/L</text>
					</view>
					<!-- <view>
						<text>模拟糖化: </text>
						<text style="color: #04c99b; font-size: 36rpx;">{{uaCountCharData.three_month.moni}}</text> 
					</view> -->
				</view>
				<view class="sta_tj_con">
					<view>
						<view class="qiun-charts">
							<canvas canvas-id="canvasRingThreeMonth" id="canvasRingThreeMonth" class="charts"></canvas>
						</view>
					</view>
					<view>
						<view class="con_fr">
							<text class="con_fr_one" style="color: #04c99b;">正常:{{uaCountCharData.three_month.normal_num}}次</text>
							<text class="con_fr_tow" style="color: #04c99b;">{{uaCountCharData.three_month.normal_scale}}%</text>
						</view>
						<view class="con_fr">
							<text class="con_fr_one" style="color: #d9a6b0;">偏高:{{uaCountCharData.three_month.high_num}}次</text>
							<text class="con_fr_tow" style="color: #d9a6b0;">{{uaCountCharData.three_month.high_scale}}%</text>
						</view>
						<view class="con_fr">
							<text class="con_fr_one" style="color: #f7b948;">偏低:{{uaCountCharData.three_month.low_num}}次</text>
							<text class="con_fr_tow" style="color: #f7b948;">{{uaCountCharData.three_month.low_scale}}%</text>
						</view>
					</view>
				</view>
				<view class="sta_tj_foo">
					<view class="tj_foo_fl">
						<text>尿酸最高</text><text>(umol/L)</text>
						<view class="qiun-charts">
							<canvas canvas-id="canvasRingThreeMonthZ" id="canvasRingThreeMonthZ" class="charts"></canvas>
						</view>
					</view>
					<view class="tj_foo_fr">
						<text>分时段平均值</text> 
						<view>
							<view class="qiun-charts">
								<canvas canvas-id="canvasFrRingThreeMonthZ" id="canvasFrRingThreeMonthZ" class="charts"></canvas>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 表格 -->
		<view class="sta_form" v-show="currentSta == 1">
			<t-table @change="change">
				<t-tr>
					<t-th>日期</t-th>
					<t-th>凌晨</t-th>
					<t-th>早餐(前)</t-th>
					<t-th>早餐(后)</t-th>
					<t-th>午餐(前)</t-th>
					<t-th>午餐(后)</t-th>
					<t-th>晚餐(前)</t-th>
					<t-th>晚餐(后)</t-th>
					<t-th>睡前</t-th>
				</t-tr>
				<scroll-view 
					scroll-y 
					style="height: calc(100vh - 300rpx);" 
					refresher-enabled="true" 
					@refresherpulling="onPulling"
					@scrolltolower="getNextPage"
					@scrolltoupper="getPreviousPage"
					>
					<t-tr v-for="(item,index) in tableList" :key="index">
						<t-td v-for="(v,i) in item" :key="i">{{v}}</t-td>
					</t-tr>
				</scroll-view>
			</t-table> 
		</view>
		<!-- 曲线 -->
		<view class="sta_curve" v-show="currentSta == 2">
			<view class="curve_list">
				<text :class="['curve_item', currentCurve == 0? 'curr_item':'']" @click="currentCurve = 0, day = 1">过去7天</text>
				<text :class="['curve_item', currentCurve == 1? 'curr_item':'']" @click="currentCurve = 1, day = 2">过去30天</text>
				<text :class="['curve_item', currentCurve == 2? 'curr_item':'']" @click="currentCurve = 2, day = 3">过去90天</text>
			</view>
			<scroll-view class="curve_chart" scroll-y>
				<view class="curve_chart_item">
					<view class="curchit_tit">餐前尿酸</view>
					<view class="curchit_com">
						<canvas @touchstart="touchLineA" canvas-id="curchitOne" id="curchitOne" class="curchit_com_charts" style="width: 660rpx; height: 420rpx;"
						 v-show="curchitList[0]"></canvas>
						<view v-show="!curchitList[0]" class="no-curchitdata">
							<u-empty text="餐前尿酸数据为空" mode="order"></u-empty>
						</view>
					</view>
				</view>
				<view class="curve_chart_item">
					<view class="curchit_tit">餐后尿酸</view>
					<view class="curchit_com">
						<canvas @touchstart="touchLineB" canvas-id="curchitTow" id="curchitTow" class="curchit_com_charts" style="width: 660rpx; height: 420rpx;"
						 v-show="curchitList[1]"></canvas>
						<view v-show="!curchitList[1]" class="no-curchitdata">
							<u-empty text="餐后尿酸数据为空" mode="order"></u-empty>
						</view>
					</view>

				</view>
				<view class="curve_chart_item">
					<view class="curchit_tit">空腹尿酸</view>
					<view class="curchit_com">
						<canvas @touchstart="touchLineC"  canvas-id="curchitTherr" id="curchitTherr" class="curchit_com_charts" style="width: 660rpx; height: 420rpx;"
						 v-show="curchitList[2]"></canvas> 
						<view v-show="!curchitList[2]" class="no-curchitdata">
							<u-empty text="空腹尿酸数据为空" mode="order"></u-empty>
						</view> 
					</view>

				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import uCharts from '../../compon/u-charts/u-charts.js';
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	import wsLoadMore from '@/components/wsure-load-more/load-more.vue';
	var _self;
	var canvaRing = null;
	let canvaLineA = null;
	let canvaLineB = null;
	let canvaLineC = null;
	export default {
		components: {
			tTable,
			tTh,
			tTr,
			tTd,
			wsLoadMore
		},
		data() {
			return {
				recordnsList:[],
				page: 1,
				month: null,
				year: null,
				pixelRatio: 1,
				serverData: '', 
				// 下一页
				 nextPage: 0,
				 // 当前页
				 page: 0,
				// 上一页
				 previousPage: 0, 
				 // 是否请求完成
				 isShowPage: true,
				// 数据
				uaCountCharData: {},
				list: [
				{
					name: '记录'
				},
				{
					name: '表格'
				}, {
					name: '曲线'
				}, {
					name: '统计',
				}],
				// 表格数据
				tableList: [],
				// 曲线条数
				day: 1,
				// 顶部高亮
				currentSta: 0,
				// 曲线区域高亮
				currentCurve: 0,
				// 曲线表格数据是否存在
				curchitList: [true, true, true]
			};
		},
		onShow() {
			this.getTableChar(this.page, 'content')
			this.getUaList()
		},
		methods: {
			addRecordns() {
				uni.navigateTo({
					url: 'addrecordns/index'
				})
			},
			change(index) {
				this.currentSta = index;
			},
			getServerData(canvasRingWeekData, canvasRingOneMonthData, canvasRingThreeMonthData) {
				this.canvasRingWeekData("canvasRingWeek", canvasRingWeekData);
				this.canvasRingOneMonthData("canvasRingOneMonth", canvasRingOneMonthData);
				this.canvasRingThreeMonthData("canvasRingThreeMonth", canvasRingThreeMonthData);
			},
			// 左侧柱状图
			getFlShowColumn(canvasRingWeekDataZ, canvasRingOneMonthDataZ, canvasRingThreeMonthDataZ) {
				this.canvasRingWeekDataZ("canvasRingWeekZ", canvasRingWeekDataZ);
				this.canvasRingOneMonthDataZ("canvasRingOneMonthZ", canvasRingOneMonthDataZ);
				this.canvasRingThreeMonthDataZ("canvasRingThreeMonthZ", canvasRingThreeMonthDataZ);
			},
			// 右侧柱状图
			getFrShowColumn(canvasFrRingWeekDataZ, canvasFrRingOneMonthDataZ, canvasFrRingThreeMonthDataZ) {
				this.canvasFrRingWeekDataZ("canvasFrRingWeekZ", canvasFrRingWeekDataZ);
				this.canvasFrRingOneMonthDataZ("canvasFrRingOneMonthZ", canvasFrRingOneMonthDataZ);
				this.canvasFrRingThreeMonthDataZ("canvasFrRingThreeMonthZ", canvasFrRingThreeMonthDataZ);
			},
			canvasRingWeekData(canvasId, canvasRingWeekData) {
				let _this = this
				new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 8,
					legend: true,
					title: {
						name: canvasRingWeekData[0].allNum,
						color: '#333',
						fontSize: 24,
						offsetY: 0,
					},
					subtitle: {
						name: '测试次数',
						color: '#717171',
					},
					extra: {
						pie: {
							offsetAngle: -30,
							ringWidth: 10,
							labelWidth: 12
						}
					},
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					series: canvasRingWeekData,
					animation: true,
					width: 180,
					height: 140,
					disablePieStroke: true,
					dataLabel: true,
					// 下方图例
					legend: {
						show: false
					},
					dataLabel: false
				});
			},

			canvasRingOneMonthData(canvasId, canvasRingOneMonthData) {
				let _this = this
				new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 8,
					legend: true,
					title: {
						name: canvasRingOneMonthData[0].allNum,
						color: '#333',
						fontSize: 24,
						offsetY: 0,
					},
					subtitle: {
						name: '测试次数',
						color: '#717171',
					},
					extra: {
						pie: {
							offsetAngle: -30,
							ringWidth: 10,
							labelWidth: 12
						}
					},
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					series: canvasRingOneMonthData,
					animation: true,
					width: 180,
					height: 140,
					disablePieStroke: true,
					dataLabel: true,
					// 下方图例
					legend: {
						show: false
					},
					dataLabel: false
				});
			},

			canvasRingThreeMonthData(canvasId, canvasRingThreeMonthData) {
				let _this = this
				new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 8,
					legend: true,
					title: {
						name: canvasRingThreeMonthData[0].allNum,
						color: '#333',
						fontSize: 24,
						offsetY: 0,
					},
					subtitle: {
						name: '测试次数',
						color: '#717171',
					},
					extra: {
						pie: {
							offsetAngle: -30,
							ringWidth: 10,
							labelWidth: 12
						}
					},
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					series: canvasRingThreeMonthData,
					animation: true,
					width: 180,
					height: 140,
					disablePieStroke: true,
					dataLabel: true,
					// 下方图例
					legend: {
						show: false
					},
					dataLabel: false
				});
			},

			// 左侧柱状图
			canvasRingWeekDataZ(canvasId, canvasRingWeekDataZ) {
				let _this = this
				new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'column',
					legend: {
						show: false
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: 1,
					animation: true,
					categories: ['最高值', '最低值'],
					series: canvasRingWeekDataZ,
					width: 160,
					height: 100,
					xAxis: {
						disableGrid: true,
						dashLength: 10,

					},
					yAxis: {
						disableGrid: true,
						disabled: true,
						min: 0,
						max: 1500
					},
					dataLabel: true,
					extra: {
						column: {
							type: 'group',
							width: 20
						}
					}
				})
			},
			// 右侧
			canvasFrRingWeekDataZ(canvasId, canvasFrRingWeekDataZ) {
				let _this = this
				new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'column',
					legend: {
						show: false
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: 1,
					animation: true,
					categories: ['空腹', '餐前', '餐后', '睡前'],
					series: canvasFrRingWeekDataZ,
					width: 160,
					height: 100,
					xAxis: {
						disableGrid: true,
						dashLength: 10
					},
					yAxis: {
						disableGrid: true,
						disabled: true,
						min: 0,
						max: 1500
					},
					dataLabel: true,
					extra: {
						column: {
							type: 'group',
							width: 20
						}
					}
				})
			},
			canvasRingOneMonthDataZ(canvasId, canvasRingOneMonthDataZ) {
				let _this = this
				new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'column',
					legend: {
						show: false
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: 1,
					animation: true,
					categories: ['最高值', '最低值'],
					series: canvasRingOneMonthDataZ,
					width: 160,
					height: 100,
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						disableGrid: true,
						disabled: true,
						min: 0,
						max: 1500
					},
					dataLabel: true,
					extra: {
						column: {
							type: 'group',
							width: 20
						}
					}
				})
			},
			// 右侧
			canvasFrRingOneMonthDataZ(canvasId, canvasFrRingOneMonthDataZ) {
				let _this = this
				new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'column',
					legend: {
						show: false
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: 1,
					animation: true,
					categories: ['空腹', '餐前', '餐后', '睡前'],
					series: canvasFrRingOneMonthDataZ,
					width: 160,
					height: 80,
					xAxis: {
						disableGrid: true,
						dashLength: 10
					},
					yAxis: {
						disableGrid: true,
						disabled: true,
						min: 0,
						max: 1500
					},
					dataLabel: true,
					extra: {
						column: {
							type: 'group',
							width: 20
						}
					}
				})
			},
			canvasRingThreeMonthDataZ(canvasId, canvasRingThreeMonthDataZ) {
				let _this = this
				new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'column',
					legend: {
						show: false
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: 1,
					animation: true,
					categories: ['最高值', '最低值'],
					series: canvasRingThreeMonthDataZ,
					width: 160,
					height: 100,
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						disableGrid: true,
						disabled: true,
						min: 0,
						max: 1500
					},
					dataLabel: true,
					extra: {
						column: {
							type: 'group',
							width: 20
						}
					}
				})
			},
			// 右侧
			canvasFrRingThreeMonthDataZ(canvasId, canvasFrRingThreeMonthDataZ) {
				let _this = this
				new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'column',
					legend: {
						show: false
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: 1,
					animation: true,
					categories: ['空腹', '餐前', '餐后', '睡前'],
					series: canvasFrRingThreeMonthDataZ,
					width: 160,
					height: 80,
					xAxis: {
						disableGrid: true,
						dashLength: 10 
					},
					yAxis: {
						disableGrid: true,
						disabled: true,
						min: 0,
						max: 1500
					},
					dataLabel: true,
					extra: {
						column: {
							type: 'group',
							width: 20
						}
					}
				})
			},
			// 曲线 - 餐前血糖
			showCurchitOne(curchitOne, curchitOneChartData) {
				let _this = this
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: curchitOne,
					type: 'mix',
					fontSize: 11,
					legend: {
						show: false
					},
					dataLabel: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					categories: curchitOneChartData.categories,
					series: curchitOneChartData.series,
					animation: true,
					xAxis: {
						disabled: true,
						disableGrid: true,
						type: 'grid',
						dashLength: 8
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						min: 0,
						max: Math.max(...curchitOneChartData.series[0].data) + 100,
					},
					width: 340,
					height: 200,
				});
			},
			// 曲线 - 餐后血糖
			showCurchitTow(curchitTow, curchitTowChartData) {
				let _this = this
				canvaLineB = new uCharts({
					$this: _self,
					canvasId: curchitTow,
					type: 'mix',
					fontSize: 11,
					legend: {
						show: false
					},
					dataLabel: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					categories: curchitTowChartData.categories,
					series: curchitTowChartData.series,
					animation: true,
					xAxis: {
						disabled: true,
						disableGrid: true,
						type: 'grid',
						dashLength: 8
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						min: 0,
						max: Math.max(...curchitTowChartData.series[0].data) + 100,
					},
					width: 340,
					height: 200,
				});
			},
			// 曲线 - 空腹血糖
			showCurchitTherr(curchitTherr, curchitTherrChartData) { 
				let _this = this
				canvaLineC = new uCharts({
					$this: _self,
					canvasId: curchitTherr,
					type: 'mix',
					fontSize: 11,
					legend: {
						show: false
					},
					dataLabel: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					categories: curchitTherrChartData.categories,
					series: curchitTherrChartData.series,
					animation: true,
					xAxis: {
						disabled: true,
						disableGrid: true,
						type: 'grid',
						dashLength: 8
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						min: 0,
						max: Math.max(...curchitTherrChartData.series[0].data) + 100,
					},
					width: 340,
					height: 200,
				}); 
			},
			// 获取图表记录
			getUaCountChar() {
				let _this = this
				_this.$api.sendRequest({
					url: '/api/ua/countChar',
					success: res => {
						if (res.code >= 0) {
							_this.uaCountCharData = res.data
							let canvasRingWeekData = [],
								canvasRingOneMonthData = [],
								canvasRingThreeMonthData = [],
								canvasRingWeekDataZ = [],
								canvasRingOneMonthDataZ = [],
								canvasRingThreeMonthDataZ = [],
								canvasFrRingWeekDataZ = [],
								canvasFrRingOneMonthDataZ = [],
								canvasFrRingThreeMonthDataZ = []
							canvasRingWeekData.push({
								'data': res.data.week.low_num,
								'color': '#e4aeb0',
								'allNum': res.data.week.all_num
							}, {
								'data': res.data.week.normal_num,
								'color': '#01cb9b'
							}, {
								'data': res.data.week.high_num,
								'color': '#f7c0b2'
							})

							canvasRingWeekDataZ.push({
								'data': [{
									'value': res.data.week.max,
									'color': '#00b089'
								}, {
									'value': res.data.week.min,
									'color': '#f24f62'
								}]
							})

							canvasFrRingWeekDataZ.push({
								'data': res.data.week.timeType.map(item => {
									return parseInt(item)
								})
							})
							canvasRingOneMonthData.push({
								'data': res.data.one_month.low_num,
								'color': '#e4aeb0',
								'allNum': res.data.one_month.all_num
							}, {
								'data': res.data.one_month.normal_num,
								'color': '#01cb9b'
							}, {
								'data': res.data.one_month.high_num,
								'color': '#f7c0b2'
							})
							canvasRingOneMonthDataZ.push({
								'data': [{
									'value': res.data.one_month.max,
									'color': '#00b089'
								}, {
									'value': res.data.one_month.min,
									'color': '#f24f62'
								}]
							})
							canvasFrRingOneMonthDataZ.push({
								'data': res.data.one_month.timeType.map(item => {
									return parseInt(item)
								})
							})
							canvasRingThreeMonthData.push({
								'data': res.data.three_month.low_num,
								'color': '#e4aeb0',
								'allNum': res.data.three_month.all_num
							}, {
								'data': res.data.three_month.normal_num,
								'color': '#01cb9b'
							}, {
								'data': res.data.three_month.high_num,
								'color': '#f7c0b2'
							})
							canvasRingThreeMonthDataZ.push({
								'data': [{
									'value': res.data.three_month.max,
									'color': '#00b089'
								}, {
									'value': res.data.three_month.min,
									'color': '#f24f62'
								}]
							})
							canvasFrRingThreeMonthDataZ.push({
								'data':  res.data.three_month.timeType.map(item => {
									return parseInt(item)
								})
							})
							// 原型图
							_this.getServerData(canvasRingWeekData, canvasRingOneMonthData, canvasRingThreeMonthData)
							//柱状图
							_this.getFlShowColumn(canvasRingWeekDataZ, canvasRingOneMonthDataZ, canvasRingThreeMonthDataZ)
							// 右侧柱状图
							_this.getFrShowColumn(canvasFrRingWeekDataZ, canvasFrRingOneMonthDataZ, canvasFrRingThreeMonthDataZ)

						}
					}
				})
			},
			// 获取曲线图数据
			getGlucoseChar(day) {   
				let _this = this
				_this.curchitList = [true,true,true]
				this.$api.sendRequest({
					url: '/api/ua/lineChar',
					data: {
						day
					},
					success: res => {
						if (res.code >= 0) {  
							let curchitOneData = {
								categories: res.data.before[0] || [],
								series: [{
										"name": '曲线',
										"data": res.data.before[1] || [],
										"type": 'line',
										"style": "curve",
										"color": "#e93f3b"
									} 
								]
							}
							if (curchitOneData.series[0].data.length == 0) {
								_this.curchitList[0] = false
								_this.$forceUpdate()
							}

							let curchitTowData = {
								categories: res.data.after[0] || [],
								series: [{
										"name": '曲线',
										"data": res.data.after[1] || [],
										"type": 'line',
										"style": "curve",
										"color": "#e93f3b"
									} 
								]
							}
							if (curchitTowData.series[0].data.length == 0) {
								_this.curchitList[1] = false
								_this.$forceUpdate()
							}
							let curchitTherrData = {
								categories: res.data.empty[0] || [],
								series: [{
										"name": '曲线',
										"data": res.data.empty[1] || [],
										"type": 'line',
										"style": "curve",
										"color": "#e93f3b"
									} 
								]
							}
							if (curchitTherrData.series[0].data.length == 0) {
								_this.curchitList[2] = false
								_this.$forceUpdate()
							}
							_this.showCurchitOne('curchitOne', curchitOneData)
							_this.showCurchitTow('curchitTow', curchitTowData)
							_this.showCurchitTherr('curchitTherr', curchitTherrData)
						}

					}
				})
			},
			getTableChar(page, type) {
				uni.showLoading({
					title: '数据加载中...',
				})
				this.isShowPage = false
				this.$api.sendRequest({
					url: '/api/ua/tableChar',
					data: {
						page
					},
					success: res => {  
						uni.hideLoading() 
						this.isShowPage = true
						// 上一页数据
						if(type == 'previous'){
								let newArr = []
							for(let key in res.data){
								newArr.push(res.data[key])
							} 
							this.tableList.unshift(...newArr)
						}else{
								let newArr = []
							for(let key in res.data){
								newArr.push(res.data[key])
							} 
							this.tableList.push(...newArr)
						}   
					}
				})
			},
			// 下一页数据
			getNextPage(){ 
				if(this.isShowPage){
					this.nextPage += 1
					this.getTableChar(this.nextPage, 'next')
				}
				 
			},
			// 上一页数据
			getPreviousPage(){
				if(this.isShowPage){
					this.previousPage += -1
					this.getTableChar(this.previousPage, 'previous')	
				} 
			},
			touchLineA(e) {
				canvaLineA.showToolTip(e, { 
					format: function(item, category) { 
						return category 
					}
				});
			},
			touchLineB(e){
				canvaLineB.showToolTip(e, { 
					format: function(item, category) { 
						return category 
					}
				});
			},
			touchLineC(e){
				console.log(e)
				canvaLineC.showToolTip(e, { 
					format: function(item, category) { 
						return category 
					}
				});
			},
			getUaList(){
				this.$api.sendRequest({
					url: '/api/ua/uaList?page=' + this.page ,
					success: res => { 
						if(res.code >= 0){
							this.recordnsList = res.data.data 
						}
					} 
				}) 
			},
			goToAddrecordDeta(info){ 
				console.log(info) 
				uni.redirectTo({
					url: '../addrecordDeta/index?info=' + JSON.stringify(info)
				})
			}
		},
		toJSON() {
			return this
		},
		watch: {
			currentSta(num) {
				this.previousPage = 0
				this.nextPage = 0,
				this.tableList = []
				if (num == 3) {
					this.getUaCountChar()
				} else if (num == 2) {
					this.getGlucoseChar(this.day)
				} else if (num == 1) {
					this.getTableChar(this.page)
				}else{
					this.getUaList()
				}
			},
			currentCurve(num) {
				switch (num) {
					case 0:
						this.getGlucoseChar(this.day)
						break;
					case 1:
						this.getGlucoseChar(this.day)
						break;
					case 2:
						this.getGlucoseChar(this.day)
						break;
					default:
						return 0
				}
			}
		}
	}
</script>

<style lang="less">
	.statistics {
		overflow-x: hidden;
		.recordns_list{
			height: calc(100vh - 80rpx);
			background-color: #fff;
			.recordns_item{ 
				padding: 20rpx;
				display: flex; 
				border-bottom: 2rpx solid #efebeb;
				.rec_item_box{
					position: relative;
					top: 10rpx;
					width: 80rpx;
					height: 80rpx;
					background-color: #01cb9b;
					border-radius: 50%;
					.rec_it_img{
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%,-50%);
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
					}
				} 
				.rec_it_con{
					margin-left: 30rpx;
					flex: 1;
					display: flex;
					flex-direction: column;
					& text:nth-child(2){
						font-size: 28rpx;
						color: #bfbfbf;
					}
				}
				.rev_it_fr{}
			}
		}
		.sta_tj {
			padding: 0 20rpx;
			margin-top: 20rpx;
			background-color: #fff;

			.sta_tj_title {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				font-weight: 700;
				border-bottom: 2rpx solid #f7f6fc;
			}

			.sta_tj_deta {
				display: flex;
				height: 120rpx;
				border-bottom: 2rpx solid #f7f6fc;

				view {
					flex: 1;
					line-height: 120rpx;
					text-align: center;
				}

				& view:first-child {
					border-right: 2rpx solid #f7f6fc;
				}
			}

			.sta_tj_con {
				display: flex;
				height: 360rpx;
				border-bottom: 2rpx solid #f7f6fc;

				view {
					flex: 1;
				}

				& view:nth-child(1) {}

				& view:nth-child(2) {
					.con_fr {
						margin-top: 20rpx;
						display: flex;

						.con_fr_one {
							margin-right: 30rpx;
							width: 200rpx;
							height: 50rpx;
							line-height: 50rpx;
							text-align: center;
						}
					}
				}
			}

			.sta_tj_foo {
				padding: 20rpx 0;
				height: 300rpx;
				display: flex;

				.tj_foo_fl,
				.tj_foo_fr {
					padding: 0 20rpx;
					flex: 1;

					& text:nth-child(1) {}

					& text:nth-child(2) {
						font-size: 26rpx;
						color: #bdc2c6;
					}

					view {
						width: 100%;
						height: calc(100% - 60rpx);

					}

					.foo_fl_zhu {
						display: flex;

						view {
							display: flex;
							flex-direction: column;
							text-align: center;

							& text:nth-child(2) {
								margin: 0 auto;
								width: 30rpx;
								height: 100rpx;
								background-color: #f05062;
							}
						}
					}
				}

				& view:nth-child(1) {
					border-right: 2rpx solid #efefef;
				}
			}
		}

		.qiun-charts {
			width: 300rpx;
			height: 280rpx;

			.charts {
				width: 100%;
				height: 100%;
			}
		}

		.u-tab-item {
			width: 33% !important;
		}

		// 曲线
		.sta_curve {
			background-color: #f4f2f7;

			.curve_list {
				padding: 0 40rpx;
				display: flex;
				height: 80rpx;
				line-height: 100rpx;

				.curve_item {
					flex: 1;
					text-align: center;
				}

				.curr_item {
					color: #00b089;
				}
			}

			.curve_chart {
				padding: 20rpx;
				width: calc(100% - 40rpx);
				height: calc(100vh - 240rpx);
				background-color: #f4f2f7;

				.curve_chart_item {
					margin-bottom: 10rpx;
					border-radius: 20rpx;
					background-color: #fff;

					.curchit_tit {
						padding: 0 20rpx;
						height: 60rpx;
						line-height: 60rpx;
					}

					.curchit_com {
						min-height: 340rpx;

						.no-curchitdata {
							padding-top: 100rpx;
						}
					}
				}
			}
		}
	}
</style>
